import React, { useEffect, useState } from 'react'
import { Button, Card, Form, Input, message, Select, Table } from 'antd'
import { SearchOutlined } from "@ant-design/icons"
import { useForm } from 'antd/lib/form/Form'
import { ColumnsType } from 'antd/lib/table';
import { reqGetcityList, reqGetdistrictList, reqGetHospitalList, reqGethostypeList, reqGetProvinceList, reqUpdateHospitalStatus } from '@/api/hospital/hospitalList';
import { HospitalListType, ProvinceList } from '@/api/hospital/model/hospitalListTypes';
import { useNavigate } from 'react-router-dom';

const { Option } = Select;
export default function HospitalList() {
  //每页展示数量
  let [limit,setLimit] = useState(5);
  //当前页码
  let [page,setPage] = useState(1);
  //总数
  let [total,setTotal] = useState(100);

  // 省份 状态
  let [ProvinceList,setProvinceList] = useState<ProvinceList>([]);
  //市状态
  let [city,setCity] = useState<ProvinceList>([]);
  //区状态
  let [district,setDistrict] = useState<ProvinceList>([]);

  // 医院等级状态
  let [hostype,setHostype] =  useState<ProvinceList>([]);

  //医院列表数据
  let [hospitalList,setHospitalList] = useState<HospitalListType>([]);

  //  Navigate  函数  
  let navigate = useNavigate();

  //表单对象
  let [form] = useForm()
  //获取表单数据
  let finish = ()=>{
      //调用请求数据的方法
      getHospitalList();
  }

  //清空表单
  let reset = ()=>{
      //清空表单
      form.resetFields();
      //重新请求医院列表数据
      getHospitalList();
  }


  // 请求医院列表数据
  let getHospitalList = async ()=>{
    //  获取表单搜索数据
    let values =  form.getFieldsValue();
    //请求api 接口
    let result = await reqGetHospitalList({page,limit,...values});
    // console.log(result);
    //设置医院列表数据
    setHospitalList(result.content);
    //设置医院总数
    setTotal(result.totalElements);

  }


  useEffect(()=>{
      //初始化请求数据
      getHospitalList();
  },[page,limit])


  useEffect(()=>{
      //获取省份信息
      async function main(){
        //请求 api
        let result = await reqGetProvinceList();
        // console.log(result)
        //设置 省份 状态
        setProvinceList(result);
      }
      main();
  },[])


  useEffect(()=>{
     //医院等级信息
     async function main(){
      //请求 api
      let result = await reqGethostypeList();
      // console.log(result)
      //设置 医院等级 状态
      setHostype(result);
    }
    main();
  },[])


  //  切换省份 获取 市 的信息
  let Provincechange = async (id: any)=>{
    //清空市 数据 
    setCity([]);
    //清空表单 市数据
    form.setFieldsValue({"cityCode":undefined,"districtCode":undefined});
    // console.log(city);
    // console.log(id);
    //请求市 api
    let result = await reqGetcityList(id);
    // 设置 市 状态
    setCity(result);
  }


  // 切换市 获取区信息
  let citychange = async (id:any)=>{
    //清空区数据
    setDistrict([]);
    // 清空页面中的显示数据
    form.setFieldsValue({"districtCode":undefined});
    // 请求  api
    let result = await reqGetdistrictList(id);
    //设置区 信息
    setDistrict(result);

  }


  //  切换医院上下线
  let changestatus = (id:string,status:number)=>{
    return async ()=>{
      //处理医院上下线状态
      let sta = status === 0 ? 1 : 0;

      // 请求 api 
       await reqUpdateHospitalStatus(id,sta);

       // 提示
       message.success("更新成功~");

       // 重新请求 医院列表 api
      //  getHospitalList();

      //  更新单个数据
      let newhospital =hospitalList.map(item =>{
        if(item.id === id){
            item.status ?  item.status = 0 : item.status = 1;
        }
        return item;
      })

      //设置新的 医院列表数据
      setHospitalList(newhospital);
    }
  }


  //表格表头信息数据
  let columns:ColumnsType<any> = [
    {
      title:"序号",
      align:"center",
      width:"80px",
      render:(x:any, y:any ,index:number)=>{
        return index +1;
      }
    },
    {
      title:"医院LOGO",
      align:"center",
      dataIndex:"logoData",
      //当 设置 dataIndex 时,第一参数 就是 dataIndex 值
      //当 不设置 dataIndex 时,第一个参数 是当前的一行数据对象
      render:(data)=>{
        return <img width="100px" src={`data:image/jpeg;base64,${data}`} alt="logo"></img>
      }
    },
    {
      title:"医院名称",
      align:"center",
      dataIndex:"hosname",
    },
    {
      title:"等级",
      align:"center",
      render:(data)=>{
        return data.param.hostypeString
      }
    },
    {
      title:"详细地址",
      align:"center",
      dataIndex:"param",
      render:(data)=>{
        return data.fullAddress
      }
    },
    {
      title:"状态",
      align:"center",
      dataIndex:"status",
      render:(data)=>{
          return data === 0 ? "未上线" : "已上线";
      }
    },
    {
      title:"创建时间",
      align:"center",
      dataIndex:"createTime",
    },
    {
      title:"操作",
      fixed:"right",
      align:"center",
      width:"230px",
      render:(row)=>{
        return  <div>
          <Button type="primary" size="small" onClick={()=>{
            navigate(`/syt/dashboard/hospitalList/show/${row.id}`);
          }}>查看</Button>
          <Button type="primary" size="small" className='ml'>排班</Button>
          {
            row.status ? 
            <Button  onClick={changestatus(row.id,row.status)} type="primary" danger size="small" className='ml'>下线</Button>
            : <Button onClick={changestatus(row.id,row.status)} type="primary" size="small" className='ml'>上线</Button>
          }
          
        </div>
      }
    },
  ]

  return (
      <Card>
           {/* 顶部搜索 */}
           <Form
                form={form}
                layout="inline"
                autoComplete="off"
                onFinish={finish}
                onReset={reset}
            >

          <Form.Item name="provinceCode">
              <Select onChange={Provincechange} placeholder="请选择省" style={{ width: 160 }}>
                    {
                      ProvinceList.map((item)=>{
                        return <Option key={item.id} value={item.id}>{item.name}</Option>
                      })
                    }
                    
              </Select>
          </Form.Item>

          <Form.Item name="cityCode">
              <Select onChange={citychange}  placeholder="请选择市" style={{ width: 160 }}>
                    {
                      city.map((item)=>{
                        return <Option key={item.id} value={item.id}>{item.name}</Option>
                      })
                    }
              </Select>
          </Form.Item>

          <Form.Item name="districtCode">
              <Select  placeholder="请选择区" style={{ width: 160 }}>
                    {
                      district.map(item=>{
                        return <Option key={item.id} value={item.id}>{item.name}</Option>
                      })
                    }
                    
                   
              </Select>
          </Form.Item>

                <Form.Item
                    name="hosname"
                >
                    <Input placeholder='医院名称' />
                </Form.Item>

                <Form.Item
                    name="hoscode"
                >
                    <Input placeholder='医院编号' />
                </Form.Item>

                <Form.Item name="hostype">
              <Select  placeholder="医院类型" style={{ width: 160 }}>
                    {
                      hostype.map(item =>{
                        return <Option key={item.id} value={item.value}>{item.name}</Option>
                      })
                    }
                    
                    
              </Select>
          </Form.Item>


          <Form.Item name="status">
              <Select  placeholder="医院状态" style={{ width: 160 }}>
                    <Option value={0}>未上线</Option>
                    <Option value={1}>已上线</Option>
              </Select>
          </Form.Item>

                <Form.Item className='h-20' wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" icon={<SearchOutlined />} htmlType="submit">
                        查询
                    </Button>
                </Form.Item>

                <Form.Item className='h-20' wrapperCol={{ offset: 8, span: 16 }}>
                    <Button htmlType="reset" type="default">
                        清空
                    </Button>
                </Form.Item>
            </Form>

          {/* 表格数据展示 */}
          <Table 
            className='h-20'
            rowKey={"id"}
            scroll={{x:"1500px"}}
            columns={columns}
            dataSource={hospitalList}
            bordered
            pagination={{
              current:page,   // 当前页码
              pageSize:limit,  // 每页展示数量
              total:total,   // 总数
              showQuickJumper:true, // 是否可以快速跳转至某页
              showTotal:(total)=>{
                return <span>总数:{total}条</span>
              },
              onChange:(page: number, pageSize: number)=>{
                // console.log(page,pageSize);
                //设置页码
                setPage(page);
                //设置每页展示数量
                setLimit(pageSize);
              }
            }}
          ></Table>

      </Card>
  )
}
